$(function () {
    // 请求数据
    function getId() {
        return location.hash.split("=")[1]
    }
    $(document).ready(function(){
        $.ajax({
            url: "http://127.0.0.1:8080/static/data/details.json"
        }).done(function(data){
            console.log(data.dets);
            var id=(location.hash.split("=")[1])-1
            console.log($(".cover"))
           $(".cover")[0].innerHTML=
            `
           <div class="small-img">    
           <img src="${data.dets[id].img3}" alt="">
            <div class="focus"></div>
                 </div>
                     <div class="big-img">
                        <img src="${data.dets[id].img3}" alt="" class="img98">
                     </div>     
           ` 
           function Foo() {
            this.small_img = $(".small-img")
            this.focus = $(".focus")
            this.big_img_ele = $(".big-img ")
            this.container = $(".cover")
            this.big_img = $(".big-img img")
            console.log(this.small_img);
            // 获取小图片外边距
            this.container_offset = this.container.offset()
    
            this.focuse = {
                width: this.focus.width(),
                height: this.focus.height()
            }
        }
        Foo.prototype.bindEvent = function () {
            var mag = this
            this.small_img.mouseover(function () {
                mag.tagg("show")
            })
            this.small_img.mouseout(function () {
                mag.tagg("hide")
            })
            this.small_img.mousemove(function (e = event) {
                mag.focusMove(e.clientX, e.clientY)
                mag.bigImgMove()
            })
        }
        Foo.prototype.tagg = function (type) {
            switch (type) {
                case "show":
                    this.focus.show()
                    this.big_img_ele.show()
                    break
                case "hide":
                    this.focus.hide()
                    this.big_img_ele.hide()
                    break
            }
        }
        Foo.prototype.focusMove = function (x, y) {
            var _left = x - this.container_offset.left - this.focuse.width / 2
            var _top = y - this.focuse.height / 2 - 20
            if (_left < 0) {
                _left = 0;
            }
            if (_top < 0) {
                _top = 0;
            }
            if (_left > 100) {
                _left = 100;
            }
            if (_top > 100) {
                _top = 100;
            }
            this.focus.css({
                left: _left,
                top: _top
            })
            this.prop_left = _left / 150;
            this.prop_top = _top / 150;
        }
        Foo.prototype.bigImgMove = function () {
            this.big_img.css({
                left: -this.prop_left * 250,
                top: -this.prop_top * 250
            })
        }
        var foo = new Foo()
        foo.bindEvent()
          
        })
    })
    // 吸顶
    class xiding {
        constructor(res) {
            this.xiding = $(res)
            this.render()
        }
        render() {
            let _this = this
            $(window).scroll(function () {
                let xd = $("html,body").scrollTop()
                if (xd > 720) {
                    _this.xiding.css({
                        // display:"block",
                        position: "fixed",
                        top: 0,
                        backgroundColor: "#fff",
                        width: "820px"
                    })
                } else {
                    _this.xiding.css({
                        position: "static"
                    })
                }
            })
        }
    }
    new xiding(".notice-nav") 
    let $cityitem=$(".citylist .cityitem")
    for(let i=0;i<$cityitem.length;i++){
        $cityitem.click(function(){
            $(this).addClass("active").siblings().removeClass("active")
            }) 
    }
})